import React, { Component } from 'react';
// import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';

function showImg(url) {
  return  <img src={url} className="App-logo" alt="logo" />;
}
export default class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      counter: 0,
    };
  }
  componentDidMount() {
    // this.timerID = setInterval(
    //       () => this.tick(),
    //       1000
    //     );
  }
  componentWillReceiveProps(newProps, newState){      // console.log(newProps, newState);
      this.setCounterFn();
      return true;
  }
  setCounterFn(){
    this.setState(function(prevState, props) {
      console.log('counter',prevState.counter, 'increment',props.increment);
      return {// counter: prevState.counter + props.increment,
        counter:  props.increment,
      };
    });
  }
  tick() {
      this.setState({
        date: new Date()
      });
  }
  handleClick() {
     this.setState({
        counter: this.state.counter + this.props.increment,
      });
  }
  render() {
    var { img ,text} = this.props;
    // console.log(1);
    return (
      <div>
        <h2 onClick={ e => this.handleClick(e) }>counter {this.state.counter}.</h2>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          this is the child Component;
          <img src={img} className="App-logo" alt="logo" />
          {showImg(img)}
          <div>{text}</div>
      </div>
    );
}

  
}

Child.propTypes = {
  img: PropTypes.string.isRequired,
};
// Mounting：已插入真实 DOM
// Updating：正在被重新渲染
// Unmounting：已移出真实 DOM
// componentWillMount 在渲染前调用,在客户端也在服务端。

// componentDidMount : 
// 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，
// 可以通过this.getDOMNode()来进行访问。 
// 如果你想和其他JavaScript框架一起使用，
// 可以在这个方法中调用setTimeout, 
// setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

// componentWillReceiveProps 
// 在组件接收到一个新的 prop (更新后)时被调用。
// 这个方法在初始化render时不会被调用。

// shouldComponentUpdate 
// 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
// 可以在你确认不需要更新组件时使用。

// componentWillUpdate在
// 组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

// componentDidUpdate 
// 在组件完成更新后立即调用。在初始化时不会被调用。

// componentWillUnmount
// 在组件从 DOM 中移除的时候立刻被调用。